<script>
  import $ from '../dfish.js'
  import Scroll from './Scroll.vue'
  import AlignParent from './AlignParent.vue'

  export default {
    name: 'w-horizontal',
    mixins: [Scroll, AlignParent],
    props: ['br'],
    provide() {
      return {
        provideLayout: this.$options.name
      }
    },
    data() {
      return {
        dir: 'h'
      }
    },
    methods: {
      x_default() {
        return {
          gap: 0
        }
      },
      html_slots() {
        return this.html_scroll_slots()
      }
    },
    computed: {
      html_props() {
        return {
          class: [this.html_scroll_class, this.html_align_class, {'z-br': this.x.br}],
          style: !this.x.scrollX && !this.x.scrollY && this.html_scroll_cont_style,
        }
      },
      html_scroll_cont_style() {
        let gap = this.x.gap ? $.unitSize(this.x.gap) : ''
        return {
          'gap': gap,
          '--w-compat-gap': $.br.compat.gap ? gap : null,
        }
      }
    }
  }
</script>
